<template>
  <!-- home搜索结果页-->
 <div class="home-search-result">
     <NavCom :showMoreBtn ="false" :navTabs='navTabs' @navCom="navCom"></NavCom>
     <component v-if="isShow" :is ='currentView' :greatViewList='greatViewList' :shortVideoList='searchShortVideoList' @loadeMore="loadeMore" :searchFinished='searchFinished' :isSearchResult ='true'></component>
     <NoData v-else :img="noDataImg" :tip="'暂无搜索视频'"></NoData>
 </div>
</template>

<script>
import NavCom from './navCom.vue'//直播状态组件
import ShortVideo from './shortVideo.vue' //短视频组件
import GreatVideoCom from './greatVideoCom.vue' //视频组件
import NoData from '../my/noData.vue';//无数据
  export default {
     components:{
       NavCom,
       ShortVideo,
       GreatVideoCom,
       NoData, 
     },
    props: {
        greatViewList:Array,//视频数据
        searchShortVideoList:Array,//短视频数据
        searchFinished:Boolean,//无加载更多
    },
    data() {
      return {
          isShow:false,
          currentView:GreatVideoCom,
          navTabs:[{title:'视频',id:1},{title:'短视频',id:2},],
          noDataImg:require('../../assets/images/zhxyk/no_video.png') 
      };
    },
    computed: {},
    created() {},
    mounted() {
    },
    methods: {
     navCom(data){
         this.greatViewList = [];//tab切换数组清空
         this.shortVideoList = [];
         this.isShow = false;
         this.currentView = data.data.title=='短视频'? ShortVideo:GreatVideoCom;
         let type = data.data.title=='短视频'? 2:1 //视频传1 短视频2
         this.$emit('navCom',{type:'tabChange',data:type})
     },
     loadeMore(){//加载更多
         this.$emit('loadeMore',{type:'loadeMore',data:{'data':'加载更多'}})
     }, 
    },
    watch: {
        searchShortVideoList(val){
            if(val.length>0){
                this.isShow = true
            }else{
                this.isShow = false 
            }
        },
        greatViewList(val,oldVal){ //视频数据 数组大于0
            if(val.length>0){
                this.isShow = true
            }else{
               this.isShow = false  
            }
        },   
    },
     
  };
</script>
<style scoped="scoped">
 .home-search-result{
    position: absolute;
    top: 88px;
    height: calc(100vh - 88px);
    width: 100vw;
    z-index:4;
    background: #ffffff;
 }
 .home-search-result /deep/ .van-cell{
       width: 330px;
 }
 .no-data{
    height: calc(100vh - 176px);
    width: 100vw;
    margin-top: 102px;
 }
.home-search-result .nav-bar-box{
    top: 0;
}
.home-search-result /deep/ .van-tabs--line .van-tabs__wrap{
    padding: 0;
}
.home-search-result /deep/ .van-tabs__nav{
    justify-content: center;
}
.home-search-result .short-video-box,.home-search-result .great-video-box{
    height: calc(100vh - 180px);
    overflow-y: auto;
    padding-bottom: 0;

}

</style>
